<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>员工管理系统</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/all.min.css">
    <style>
        .img-fluid {
            max-width: 100px;
            height: auto;
            margin: 0 auto;
            border-radius: 10px
        }
    </style>
</head>
<body class="bg-light">
<nav class="navbar navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" href="#">员工管理系统</a>
    </div>
</nav>

<div class="container mt-4">
    <div class="card shadow-sm">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="card-title mb-0">员工列表</h5>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#employeeModal">
                    <i class="fas fa-plus"></i> 新增员工
                </button>
            </div>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="thead-light">
                    <tr>
                        <th>ID</th>
                        <th>头像</th>
                        <th>姓名</th>
                        <th>部门</th>
                        <th>职位</th>
                        <th>入职日期</th>
                        <th>联系电话</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="employeeTableBody">
                    </tbody>
                </table>
            </div>
            <nav aria-label="分页导航">
                <ul class="pagination justify-content-center mb-0" id="pageNav">
                </ul>
            </nav>
        </div>
    </div>
</div>

<!-- 员工信息模态框 -->
<div class="modal fade" id="employeeModal" tabindex="-1" aria-labelledby="employeeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="employeeModalLabel">员工信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="employeeForm">
                    <div class="form-group" id="empIdDiv">
                        <label for="empId">ID</label>
                        <input type="text" class="form-control" id="empId" name="" readonly>
                    </div>
                    <div class="form-group">
                        <label for="empName">姓名</label>
                        <input type="text" class="form-control" id="empName" name="emp_name" required>
                    </div>
                    <div class="form-group">
                        <label for="department">部门</label>
                        <select class="form-control" id="department" name="dep_name" required>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="position">职位</label>
                        <input type="text" class="form-control" id="position" name="position" required>
                    </div>
                    <div class="form-group">
                        <label for="hireDate">入职日期</label>
                        <input type="date" class="form-control" id="hireDate" name="start_date" required>
                    </div>
                    <div class="form-group">
                        <label for="phone">联系电话</label>
                        <input type="tel" class="form-control" id="phone" name="phone" required>
                    </div>
                    <div class="form-group">
                        <label for="photo">照片上传</label>
                        <div class="custom-file">
                            <input type="file" name="imgURL" class="custom-file-input" id="photo" accept="image/*">
                            <label class="custom-file-label" for="photo">选择文件</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="submit" form="employeeForm" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                确定要删除这名员工的信息吗？此操作不可撤销。
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger">确认删除</button>
            </div>
        </div>
    </div>
</div>

<script src="./js/jquery-3.6.0.js"></script>
<script src="./js/bootstrap.bundle.min.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
